<!-- <pre data-bind="text: ko.toJSON($root.rpi_outputs(), null, 2)"></pre> -->

<!-- ko if: ($root.rpi_inputs_temperature_sensors().length > 0)  -->
<div class="row-fluid">
    <h4>Temperature</h4>
    <!-- <pre data-bind="text: ko.toJSON($root.rpi_inputs_temperature_sensors(), null, 2)"></pre> -->
    <table id="enclosure-table" class="table table-bordered table-hover">
        <tbody>
            <tr>
                <th class="temperature_sensor"></th>
                <th class="temperature_actual" title="{{ _('Current actual temperature as reported by your sensor') }}">{{ _('Temperature') }}</th>
                <!-- ko if: ($root.hasAnySensorWithHumidity())  -->
                <th class="humidity_actual" title="{{ _('Current humidity') }}">{{ _('Humidity') }}</th>
                <!-- /ko -->
                <!-- ko if: ($root.hasAnyTemperatureControl())  -->
                <th class="temp_hum_control">{{ _('Control') }}</th>
                <th class="temperature_target" title="{{ _('Current target temperature') }}">{{ _('Target') }}</th>
                <!-- /ko -->
            </tr>

            <!-- ko foreach: $root.rpi_inputs_temperature_sensors() -->
            <tr>
                <th class="temperature_sensor" data-bind="text: label, attr: {title: label, rowspan: $root.calculateRowSpan(index_id)}"></th>
                <td class="temperature_actual" data-bind="attr: {rowspan: $root.calculateRowSpan(index_id)}">
                    <span data-bind="text: temp_sensor_temp, attr: {title: temp_sensor_temp}"> </span>
                    <!-- ko if: (use_fahrenheit())  -->
                    <span class="add-on">&deg;F</span>
                    <!-- /ko -->
                    <!-- ko ifnot: (use_fahrenheit())  -->
                    <span class="add-on">&deg;C</span>
                    <!-- /ko -->
                </td>
                <!-- ko if: ($root.humidityCapableSensor(temp_sensor_type()))  -->
                <td class="humidity_actual" data-bind="attr: {rowspan: $root.calculateRowSpan(index_id)}">
                    <span data-bind="text: temp_sensor_humidity, attr: {title: temp_sensor_humidity}"> </span>
                    <span class="add-on">%</span>
                </td>
                <!-- /ko -->

                <!-- ko if: ($root.hasAnySensorWithHumidity())  -->
                <!-- ko ifnot: ($root.humidityCapableSensor(temp_sensor_type()))  -->
                <td class="humidity_actual" data-bind="attr: {rowspan: $root.calculateRowSpan(index_id)}">N/A</td>
                <!-- /ko -->
                <!-- /ko -->

                <!-- ko if: ($root.linkedTemperatureControl(index_id())().length > 0 || $root.hasAnyTemperatureControl())  -->
                <!-- ko with:  $root.linkedTemperatureControl(index_id())()[0] -->
                <th class="temp_hum_control" data-bind="html: label, attr: {title: label}"></th>
                <td class="temperature_target">
                    <form class="form-inline" style="margin:0" data-bind="submit: function(element) { $root.setTemperature($data, element) }">
                        <div class="input-append">
                            <input type="number" min="0" max="999" class="input-mini input-nospin" data-bind="enable: $root.isUser(), value: temp_ctr_new_set_value, valueUpdate: 'input', attr: {placeholder:$root.getCleanTemperature(temp_ctr_set_value()), id: 'temp_control_' + index_id()}">
                            <!-- ko if: ($data.temp_ctr_type() == "heater" || $data.temp_ctr_type() == "cooler")  -->
                            <!-- ko if: ($parent.use_fahrenheit())  -->
                            <span class="add-on">&deg;F</span>
                            <!-- /ko -->
                            <!-- ko ifnot: ($parent.use_fahrenheit())  -->
                            <span class="add-on">&deg;C</span>
                            <!-- /ko -->
                            <!-- /ko -->
                            <!-- ko if: ($data.temp_ctr_type() == "dehumidifier")  -->
                            <span class="add-on">%</span>
                            <!-- /ko -->
                        </div>
                        <div class="btn-group">
                            <button type="submit" data-bind="enable: $root.isUser()" class="btn btn-primary" title="{{ _('Set') }}">
                                <i class="fa fa-check"></i>
                            </button>
                            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-bind="enable: $root.isUser()">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="javascript:void(0)" data-bind="enable: $root.isUser(), click: $root.turnOffHeater">{{ _('Off') }}</a>
                                </li>
                            </ul>
                        </div>
                    </form>
                </td>
                <!-- /ko -->
                <!-- /ko -->

                <!-- ko if: ($root.hasAnyTemperatureControl())  -->
                <!-- ko if: ( !$root.linkedTemperatureControl(index_id())().length > 0)  -->
                <td class="temp_hum_control"></td>
                <td class="temperature_target"></td>
                <!-- /ko -->
                <!-- /ko -->
            </tr>

            <!-- ko if: ($root.hasAnyTemperatureControl())  -->
            <!-- ko foreach: $root.linkedTemperatureControl(index_id())-->
            <!-- ko ifnot: ($index() ==  0)  -->
            <tr>
                <th class="temp_hum_control" data-bind="html: label, attr: {title: label}"></th>
                <td class="temperature_target">
                    <form class="form-inline" style="margin:0" data-bind="submit: function(element) { $root.setTemperature($data, element) }">
                        <div class="input-append">
                            <input type="number" min="0" max="999" class="input-mini input-nospin" data-bind="enable: $root.isUser(), value: temp_ctr_new_set_value, valueUpdate: 'input', attr: {placeholder:$root.getCleanTemperature(temp_ctr_set_value()), id: 'temp_control_' + index_id()}">
                            <!-- ko if: ($data.temp_ctr_type() == "heater" || $data.temp_ctr_type() == "cooler")  -->
                            <!-- ko if: ($parent.use_fahrenheit())  -->
                            <span class="add-on">&deg;F</span>
                            <!-- /ko -->
                            <!-- ko ifnot: ($parent.use_fahrenheit())  -->
                            <span class="add-on">&deg;C</span>
                            <!-- /ko -->
                            <!-- /ko -->
                            <!-- ko if: ($data.temp_ctr_type() == "dehumidifier")  -->
                            <span class="add-on">%</span>
                            <!-- /ko -->
                        </div>
                        <div class="btn-group">
                            <button type="submit" data-bind="enable: $root.isUser()" class="btn btn-primary" title="{{ _('Set') }}">
                                <i class="fa fa-check"></i>
                            </button>
                            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-bind="enable: $root.isUser()">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="javascript:void(0)" data-bind="enable: $root.isUser(), click: $root.turnOffHeater">{{ _('Off') }}</a>
                                </li>
                            </ul>
                        </div>
                    </form>
                </td>
            </tr>
            <!-- /ko -->
            <!-- /ko -->
            <!-- /ko -->

            <!-- /ko -->
        </tbody>
    </table>
</div>
<!-- /ko -->

<!-- ko foreach: $root.rpi_outputs() -->
<!-- ko ifnot: ($data.hide_btn_ui())  -->

<!-- ko if: ($data.output_type() == "regular")  -->
<h4>
    <span data-bind="html: label"> </span>
    <span class="badge">regular gpio</span>
    <!-- ko if: ($data.gpio_status())  -->
    <span class="badge badge-success help-inline">on</span>
    <!-- /ko -->
    <!-- ko ifnot: ($data.gpio_status())  -->
    <span class="badge badge-important help-inline">off</span>
    <!-- /ko -->
</h4>

<div>
    <!-- ko if: ($data.gpio_status())  -->
    <button data-bind="enable: $root.isUser(), click: $root.handleIO" class="btn">Turn off</button>
    <!-- /ko -->
    <!-- ko ifnot: ($data.gpio_status())  -->
    <button data-bind="enable: $root.isUser(), click: $root.handleIO" class="btn">Turn on</button>
    <!-- /ko -->
</div>
<!-- /ko -->

<!-- ko if: ($data.output_type() == "ledstrip")  -->
<h4>
    <span data-bind="html: label"> </span>
    <span class="badge">ledstrip</span>
</h4>
<div class="input-append ledstrip-div">
    <input type="text" class="input-block-level" data-bind="click: $root.showColorPicker(), value: new_ledstrip_color, valueUpdate: 'input', attr: {placeholder:ledstrip_color, name: 'colorpicker'}">
    <button type="submit" class="btn btn-input-inc" title="Set Color" data-bind="enable: $root.isUser(), click: $root.handleLedstripColor">
        <i class="fa fa-check"></i>
    </button>
</div>
<!-- /ko -->

<!-- ko if: ($data.output_type() == "gcode_output")  -->
<h4>
    <span data-bind="html: label"> </span>
    <span class="badge">gcode output</span>
</h4>
<div>
    <button data-bind="enable: $root.isOperational(), click: $root.handleGcode" class="btn">Send gcode</button>
</div>
<!-- /ko -->

<!-- ko if: ($data.output_type() == "shell_output")  -->
<h4>
    <span data-bind="html: label"> </span>
    <span class="badge">Shell Script</span>
</h4>
<div>
    <button data-bind="enable: $root.isUser(), click: $root.handleShellOutput" class="btn">Execute Script</button>
</div>
<!-- /ko -->

<!-- ko if: ($data.output_type() == "pwm")  -->
<h4>
    <span data-bind="html: label"> </span>
    <span class="badge">pwm</span>
</h4>
<div class="input-append">
    <input type="text" class="input-mini" data-bind="value: new_duty_cycle, valueUpdate: 'input', attr: {placeholder:$root.getDutyCycle(duty_cycle())}">
    <!-- ko ifnot: ($data.pwm_temperature_linked())  -->
    <button class="btn btn-input-inc" title="Set PWM" data-bind="enable: $root.isUser(), click: $root.handlePWM">
        <i class="fa fa-check"></i>
    </button>
    <!-- /ko -->
    <!-- ko if: ($data.pwm_temperature_linked())  -->
    <button class="btn btn-input-inc" title="Temperature controlled PWM" disabled>
        <i class="fa fa-check"></i>
    </button>
    <!-- /ko -->
</div>
<!-- /ko -->

<!-- ko if: ($data.output_type() == "neopixel_direct" || $data.output_type() == "neopixel_indirect")  -->
<h4>
    <span data-bind="html: label"> </span>
    <span class="badge">neopixel</span>
</h4>
<div class="input-append neopixel-div">
    <input type="text" class="input-block-level" data-bind="click: $root.showColorPicker(), value: new_neopixel_color, valueUpdate: 'input', attr: {placeholder:neopixel_color, name: 'colorpicker'}">
    <button type="submit" class="btn btn-input-inc" title="Set Color" data-bind="enable: $root.isUser(), click: $root.handleNeopixel">
        <i class="fa fa-check"></i>
    </button>
</div>
<!-- /ko -->

<!-- ko if: ($data.output_type() == "temp_hum_control")  -->
<h4>
    <span data-bind="html: label"> </span>
    <span class="badge">temperature control</span>
    <!-- ko if: ($data.temp_ctr_type() == "heater")  -->
    <span class="badge badge-warning">Heater</span>
    <!-- /ko -->
    <!-- ko if: ($data.temp_ctr_type() == "cooler")  -->
    <span class="badge badge-warning">Cooler</span>
    <!-- /ko -->
    <!-- ko if: ($data.temp_ctr_type() == "dehumidifier")  -->
    <span class="badge badge-warning">Dehumidifier</span>
    <!-- /ko -->
    <!-- ko if: ($data.gpio_status())  -->
    <span class="badge badge-success help-inline">on</span>
    <!-- /ko -->
    <!-- ko ifnot: ($data.gpio_status())  -->
    <span class="badge badge-important help-inline">off</span>
    <!-- /ko -->
</h4>
<!-- /ko -->

<!-- ko ifnot: ($data.output_type() == "pwm" && $data.pwm_temperature_linked()) -->
<!-- ko ifnot: (($data.output_type() == "regular" || $data.output_type() == "pwm") &&  $data.toggle_timer()) -->
<!-- ko ifnot: ($data.output_type() == "gcode_output" || $data.output_type() == "temperature_alarm" || $data.output_type() == "shell_output") -->
<div>
    <h5>
        <!-- ko if: ($root.isUser())  -->
        <span>Auto Startup</span>
        <!-- ko if: ($data.auto_startup())  -->
        <a href="#" data-bind="click: $root.switchAutoStartUp" class="fa fa-toggle-on enclosure-link" title="Disable Auto Startup"></a>
        <!-- /ko -->
        <!-- ko ifnot: ($data.auto_startup())  -->
        <a href="#" data-bind="click: $root.switchAutoStartUp" class="fa fa-toggle-off enclosure-link" title="Enable Auto Startup"></a>
        <!-- /ko -->
        <!-- /ko -->
    </h5>
    <h5>
        <!-- ko if: ($root.isUser())  -->
        <span>Auto Shutdown</span>
        <!-- ko if: ($data.auto_shutdown())  -->
        <a href="#" data-bind="click: $root.switchAutoShutdown" class="fa fa-toggle-on enclosure-link" title="Disable Auto Shutdown"></a>
        <!-- /ko -->
        <!-- ko ifnot: ($data.auto_shutdown())  -->
        <a href="#" data-bind="click: $root.switchAutoShutdown" class="fa fa-toggle-off enclosure-link" title="Enable Auto Shutdown"></a>
        <!-- /ko -->
        <!-- /ko -->
    </h5>

    <!-- ko if: ($data.output_type() == "temp_hum_control" && $data.temp_ctr_type() == "heater" && !$data.auto_shutdown())  -->
    <span>
        <span class="label label-important">Warning:</span>
        <span> Consider making
            <b>heater</b> auto shutdown when print finish for safety reasons.</span>
    </span>
    <!-- /ko -->
</div>
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->

<!-- ko if: (($data.output_type() == "regular" || $data.output_type() == "pwm") &&  $data.toggle_timer()) -->
<h5>
    <span>Time Toggle</span>
    <span class="badge"> active</span>
</h5>
<!-- /ko -->

<br>

<!-- /ko -->
<!-- /ko -->


<!-- ko foreach: $root.rpi_inputs() -->
<!-- ko if: ($data.input_type() == "gpio" && $data.action_type() == "printer_control" &&  $data.printer_action() == "filament" )  -->
<h4>
    <span data-bind="html: label"> </span>
    <span class="badge">filament sensor</span>
    <!-- ko if: ($root.isUser())  -->
    <!-- ko if: ($data.filament_sensor_enabled())  -->
    <a href="#" data-bind="click: $root.switchFilamentSensor" class="fa fa-toggle-on enclosure-link" title="Disable Filament Sensor"></a>
    <!-- /ko -->
    <!-- ko ifnot: ($data.filament_sensor_enabled())  -->
    <a href="#" data-bind="click: $root.switchFilamentSensor" class="fa fa-toggle-off enclosure-link" title="Enable Filament Sensor"></a>
    <!-- /ko -->
    <!-- /ko -->
</h4>
<!-- /ko -->
<!-- /ko -->